<template>
  <!-- 征兵潜力数据分析 -->
  <div class="chart" id="main1"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("main1"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross", label: { backgroundColor: "#fff" } },
        },
        legend: {
          data: ["2018", "2019", "2020", "2021", "2022"],
          textStyle: {
            color: "white",
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            axisLabel: {
              color: "white",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#b7b7b7",
              },
            },
            type: "category",
            boundaryGap: false,
            data: [
              "博铺街道",
              "长岐镇",
              "梅菉街道",
              "海滨街道",
              "塘尾街道",
              "大山江街道",
              "兰石镇",
              "覃巴镇",
              "吴阳镇",
              "振文镇",
              "樟铺镇",
              "塘缀镇",
              "浅水镇",
              "黄坡镇",
              "王村港镇",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "white",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#b7b7b7",
              },
            },
          },
        ],
        series: [
          {
            name: "2018",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,180],
          },
          {
            name: "2019",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,300],
          },
          {
            name: "2020",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,320],
          },
          {
            name: "2021",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,340],
          },
          {
            name: "2022",
            type: "line",
            stack: "Total",
            label: { show: true, position: "top" },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320,900],
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};
</script>


<style scoped>
.chart {
  width: 100%;
  height: 90%;
}
</style>